<template>
    <div class="HuiYuan-Page">
      <div class="panel-body">
        <input class="form-control" v-model="search" style="width: 400px;float:left" placeholder="搜索客户名">
        <el-button type="primary" style="float: right">添加商品<i class="el-icon-upload el-icon--right"></i></el-button>
      </div>
      <el-table :data="ShopList">
        <el-table-column prop="id" label="客户编号"/>
        <el-table-column prop="name" label="客户姓名"/>
        <el-table-column prop="address" label="客户地址"/>
        <el-table-column prop="phone" label="客户电话"/>
        <el-table-column prop="wx" label="客户微信"/>
        <el-table-column prop="level" label="会员等级"/>
        <el-table-column prop="discount" label="享受折扣"/>
        <!--<el-table-column label="查看">-->
        <!--<template scope="scope">-->
        <!--<router-link :to="'/'+scope.row.id" style="color: #177676">客户详情</router-link>-->
        <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
    </div>
</template>

<script>
  export default {
    name: 'HuiYuan-Page',
    data(){
      return {
        search:'',
        huiyuans:[]
      }
    },
    computed:{
      ShopList(){
        return this.huiyuans.filter(huiyuan=>{
          return huiyuan.name.indexOf(this.search)!=-1
        });
      }
    },
    mounted() {
      this.$http.get('/huiyuan').then(resp=>{
        this.huiyuans = resp.data;
      }).catch(err=>console.log(err));
    }
  }
</script>
<style lang="less">
    .Zy-Page {
      background-color: #3ff7ff;width: 100%;
    }
  .di1{
    width: 40%;height:275px;float: left;
  }
  .di2{
      width: 49%;height:275px;float: left;margin-left: 10px;
    }
    .disi{
      width: 1px;border:1px  solid #cccccc;float: left;height: 275px;
    }
  .label{font-size: 20px;padding-left: 0;margin-top: 0;color: #880000;}
  .diwu{margin-top: 40px;font-size: 18px;display: block;}
  .diliu{display:inline-block;margin-right: 30%}
  .disan{margin-top: 0;}
</style>
